<template>
  <div class="order-query-wrapper">
    <div class="content">
      <div class="form">
        <el-form :model="form" label-width="auto" style="width: 100%; height: 200px; margin-top: 100px;">
          <el-row class="first" >
            <el-col :span="6">
              <el-form-item label="客户编号" class="bold-label" label-width="150px">
                <el-input v-model="form.customerNum" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称" class="bold-label" label-width="150px">
                <el-input v-model="form.customerName" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="second">
            <el-col :offset="16" > 
              <el-button type="primary" @click="onSubmit">修改</el-button>
              <el-button @click="onReset">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  customerNum:'',
  customerName:'',
})

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
.order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content{
    display: flex;
    flex-direction: column;
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;

    .form{
      width: 100%;
      height: 200px;
      border-radius: 30px;
      margin-bottom: 30px;
    }
  }
}


</style>